<template>
  <div id="Login">
    <div class="login-title">
      <div class="d1">DumbAdmin</div>
      <div class="d2">阿呆出品的单页面后台模板系统</div>
    </div>
    <div class="login-form" style="padding: 30px; background-color: #fff">
      <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
          <label
            class="layui-form-label"
            style="
              background-color: #fbfbfb;
              text-align: center;
              border-radius: 5px 0 0 5px;
            "
            >请输入账号:</label
          >
          <div class="layui-input-inline">
            <input
              type="text"
              v-model="username"
              style="border-left: none; border-right: none"
              name="username"
              lay-verify="required|username"
              placeholder="请输入账号/邮箱/手机号"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <hr />
        <div class="layui-form-item">
          <label
            class="layui-form-label"
            style="
              background-color: #fbfbfb;
              text-align: center;
              border-radius: 5px 0 0 5px;
            "
            >请输入密码:</label
          >
          <div class="layui-input-inline">
            <input
              type="password"
              v-model="userpass"
              style="border-left: none; border-right: none"
              name="userpass"
              lay-verify="required|userpass"
              placeholder="请输入密码"
              autocomplete="off"
              class="layui-input"
            />
          </div>
        </div>
        <hr />
        <div style="text-align: right">
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          <button type="button" lay-submit lay-filter="*" class="layui-btn">
            登录
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
// import { getSessionStorage } from "@/utils/sessionStorage.js"

export default {
  methods: {},
  mounted() {
    let that = this;
    layui.use("form", () => {
      var form = layui.form;
      form.on("submit(*)", function (data) {
        if (
          data.field.username === "admin" &&
          data.field.userpass === "123456"
        ) {
          sessionStorage.setItem("token", 12132);
          that.$router.push({ path: "/home" });
          // setSessionStorage(1234567890)
          layer.msg("登陆成功", {
            icon: 1,
            time: 1000,
          });
        } else {
          layer.msg("账号/密码错误", {
            icon: 2,
            time: 1000,
          });
        }
      });
      form.verify({
        username: function (value, item) {
          //value：表单的值、item：表单的DOM对象
          if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
            return "用户名不能有特殊字符";
          }
          if (/(^\_)|(\__)|(\_+$)/.test(value)) {
            return "用户名首尾不能出现下划线'_'";
          }
          if (/^\d+\d+\d$/.test(value)) {
            return "用户名不能全为数字";
          }
        },

        //我们既支持上述函数式的方式，也支持下述数组的形式
        //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
        userpass: [/^[\S]{6,12}$/, "密码必须6到12位，且不能出现空格"],
      });
    });
  },
  data() {
    return {
      username: "admin",
      userpass: 123456,
    };
  },
};
</script>

<style lang="less" scopedd>
#Login {
  width: 100%;
  height: 100vh;
  background-color: #5fb878;
  overflow: hidden;

  .login-title {
    width: 360px;
    text-align: center;
    margin: 0 auto;
    margin-top: 200px;
    margin-bottom: 30px;
    .d2 {
      font-weight: 300;
      // color: #999;
      font-size: 14px;
    }
    .d1 {
      margin-bottom: 10px;
      font-weight: 300;
      font-size: 30px;
      color: #000;
    }
  }
  .login-form {
    width: 360px;
    margin: 0 auto;
    border-radius: 10px;
  }
}
</style>